<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
   /*去除默认样式*/
   body{
    padding: 0;
    margin: 0;
    background-color: #f5f5f5;
   }
   /*消除ul,li的默认样式*/
   ul,li{
    list-style: none;/*消除默认样式*/
   }
   /*消除a标签默认样式*/
   a{
    text-decoration: none;
    color: #333;
   
    margin-left: 5px;
   }
    /*假设设置标签浮动，也可以达到响应效果*/
    ul > li{
        float: left;/*设置左浮动*/
    }
    /*设置大小*/
    ul > li >a{
        display: inline-block;/*设置行内块，否则没有大小*/
        width: 40px;
        height: 40px;
        background-color: #fff;
        text-align: center;/*设置文字居中*/
        line-height: 40px;/*垂直居中*/
        border-radius: 5px;/*设置圆角*/
    }
    /*设置悬浮颜色*/
    ul > li >a:hover{
        background-color:rgba(0,0,255,0.5);
    }
    /*设置选中的元素的样式，开发中添加active属性，后期可使用vue的:class进行动态绑定*/
    ul >li.active > a{
        background-color:rgba(0,0,255,0.5);
    }
    ul > li.next > a{
        width: 80px;
        height: 40px;
    }
</style>
<body>
  <!--百度分页按钮实战,使用列表完成-->
   <ul>
    <li class="item active"><a href="#">1</a></li>
    <li class="item"><a href="#">2</a></li>
    <li class="item"><a href="#">3</a></li>
    <li class="item"><a href="#">4</a></li>
    <li class="item"><a href="#">5</a></li>
    <li class="item"><a href="#">6</a></li>
    <li class="item"><a href="#">7</a></li>
    <li class="item"><a href="#">8</a></li>
    <li class="item"><a href="#">9</a></li>
    <li class="item"><a href="#">10</a></li>
    <li class="item "><a href="#">11</a></li>
    <li class="item next"><a href="#">下一页&gt</a></li>
   </ul>
</body>
</html>